<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>person.blade</title>
        <link rel="stylesheet"
              href="/static/css/bootstrap-4.0.0-beta.2/css/bootstrap.min.css" />
        <script src="/static/js/jquery/jquery-3.2.1.min.js"></script>
        <script src="/static/js/popper/popper.min.js"></script>
        <script src="/static/css/bootstrap-4.0.0-beta.2/js/bootstrap.min.js"></script>


</head>
<body>
        <h1>person.blade</h1>
        <div class="btn-group">
                <button type="button" class="btn btn-primary">Sony</button>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                        <span class="caret"></span>
                </button>
                <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Tablet</a>
                        <a class="dropdown-item" href="#">Smartphone</a>
                </div>
        </div>


<hr>

        <div class="progress">
                <div class="progress-bar bg-success" style="width:40%"></div>
        </div>

        <div class="progress">
                <div class="progress-bar bg-info" style="width:50%"></div>
        </div>

        <div class="progress">
                <div class="progress-bar bg-warning" style="width:60%"></div>
        </div>

        <div class="progress">
                <div class="progress-bar bg-danger" style="width:70%"></div>
        </div>
<hr>
        <div class="row">
                <div class="col">.col</div>
                <div class="col">

                        <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
                        <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
                        <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
                        <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>


                </div>
                <div class="col">.col</div>
        </div>

 <script>
         $(document).ready(function(){
                 $('[data-toggle="popover"]').popover();
         });
 </script>

<hr>



        <div class="container">
                <h2>各种颜色类型的徽章</h2>
                <span class="badge badge-primary">主要</span>
                <span class="badge badge-secondary">次要</span>
                <span class="badge badge-success">成功</span>
                <span class="badge badge-danger">危险</span>
                <span class="badge badge-warning">警告</span>
                <span class="badge badge-info">信息</span>
                <span class="badge badge-light">浅色</span>
                <span class="badge badge-dark">深色</span>
        </div>


<hr>
        <!-- 按钮：用于打开模态框 -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                打开模态框
        </button>

        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                        <div class="modal-content">

                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                        <h4 class="modal-title">模态框头部</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                        模态框内容..
                                </div>

                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                </div>

                        </div>
                </div>
        </div>
<hr>
        <div class="row">
                <div class="col">.col</div>
                <div class="col">

                        <a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
                        <a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
                        <a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
                        <a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>

                </div>
                <div class="col">.col</div>
        </div>
        <script>
                $(document).ready(function(){
                        $('[data-toggle="tooltip"]').tooltip();
                });
        </script>

<hr>
        <div class="container">
                <h2>多种颜色卡片</h2>
                <div class="card">
                        <div class="card-body">Basic card</div>
                </div>
                <br>
                <div class="card bg-primary text-white">
                        <div class="card-body">Primary card</div>
                </div>
                <br>
                <div class="card bg-success text-white">
                        <div class="card-body">Success card</div>
                </div>
                <br>
                <div class="card bg-info text-white">
                        <div class="card-body">Info card</div>
                </div>
                <br>
                <div class="card bg-warning text-white">
                        <div class="card-body">Warning card</div>
                </div>
                <br>
                <div class="card bg-danger text-white">
                        <div class="card-body">Danger card</div>
                </div>
                <br>
                <div class="card bg-secondary text-white">
                        <div class="card-body">Secondary card</div>
                </div>
                <br>
                <div class="card bg-dark text-white">
                        <div class="card-body">Dark card</div>
                </div>
                <br>
                <div class="card bg-light text-dark">
                        <div class="card-body">Light card</div>
                </div>
        </div>
<hr>
        <ul class="pagination pagination-lg">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>

        <ul class="pagination pagination-sm">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>

<hr>
        <style>
                .border {
                        display: inline-block;
                        width: 70px;
                        height: 70px;
                        margin: 6px;
                }
        </style>
        <div class="container">
                <h2>边框颜色</h2>
                <p>Bootstrap4 提供了一些类来设置边框颜色:</p>
                <span class="border border-primary"></span>
                <span class="border border-secondary"></span>
                <span class="border border-success"></span>
                <span class="border border-danger"></span>
                <span class="border border-warning"></span>
                <span class="border border-info"></span>
                <span class="border border-light"></span>
                <span class="border border-dark"></span>
                <span class="border border-white"></span>
        </div>
<hr>
        <div class="container">
                <h2>表单控件: input</h2>
                <p>以下实例使用两个 input 元素，一个是 text，一个是 password ：</p>
                <form>
                        <div class="form-group">
                                <label for="usr">用户名:</label>
                                <input type="text" class="form-control" id="usr">
                        </div>
                        <div class="form-group">
                                <label for="pwd">密码:</label>
                                <input type="password" class="form-control" id="pwd">
                        </div>
                </form>
        </div>
<hr>
        轮播
        <style>
                /* Make the image fully responsive */
                .carousel-inner img {
                        width: 100%;
                        height: 100%;
                }
        </style>

        <div id="demo" class="carousel slide" data-ride="carousel">

                <!-- 指示符 -->
                <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                        <div class="carousel-item active">
                                <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
                        </div>
                        <div class="carousel-item">
                                <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
                        </div>
                        <div class="carousel-item">
                                <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
                        </div>
                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                </a>

        </div>
<hr>

        <div class="container">
                <h2>关闭提示框</h2>
                <p>我们可以在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。</p>
                <div class="alert alert-success alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>成功!</strong> 指定操作成功提示信息。
                </div>
                <div class="alert alert-info alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>信息!</strong> 请注意这个信息。
                </div>
                <div class="alert alert-warning alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>警告!</strong> 设置警告信息。
                </div>
                <div class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>错误!</strong> 失败的操作。
                </div>
                <div class="alert alert-primary alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>首选!</strong> 这是一个重要的操作信息。
                </div>
                <div class="alert alert-secondary alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>次要的!</strong> 显示一些不重要的信息。
                </div>
                <div class="alert alert-dark alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>深灰色!</strong> 深灰色提示框。
                </div>
                <div class="alert alert-light alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>浅灰色!</strong>浅灰色提示框。
                </div>
        </div>
<hr>

-----上面的样式加下面的这个bootstrap-fileinput文件上传组件




<link href="/static/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/static/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/static/bootstrap-fileinput/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

<script src="/static/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
<script src="/static/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/static/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script src="/static/bootstrap-fileinput/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="/static/bootstrap-fileinput/themes/fa/theme.js" type="text/javascript"></script>




----上面的样式加下面的这个
<div class="container kv-main">
        <div class="page-header">
                <h1>Bootstrap File Input Example
                        <small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
                                                class="glyphicon glyphicon-download"></i> Download Sample Files</a></small>
                </h1>
        </div>
        <form enctype="multipart/form-data">
                <div class="file-loading">
                        <input id="kv-explorer" type="file" multiple>
                </div>
                <br>
                <div class="file-loading">
                        <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
                </div>
                <br>
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-default">Reset</button>
        </form>
        <hr>
        <form enctype="multipart/form-data">
                <label for="file-0b">Test invalid input type</label>
                <div class="file-loading">
                        <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
                </div>
                <script>
                        $(document).on('ready', function () {
                                $("#file-0b").fileinput();
                        });
                </script>
        </form>
        <hr>
        <form enctype="multipart/form-data">
                <div class="file-loading">
                        <input id="file-0c" class="file" type="file" multiple data-min-file-count="3">
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <input id="file-0d" class="file" type="file">
                        </div>
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                        </div>
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <input id="file-2" type="file" class="file" readonly data-show-upload="false">
                        </div>
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <label>Preview File Icon</label>
                                <input id="file-3" type="file" multiple>
                        </div>
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <input id="file-4" type="file" class="file" data-upload-url="#">
                        </div>
                </div>
                <hr>
                <div class="form-group">
                        <button class="btn btn-warning" type="button">Disable Test</button>
                        <button class="btn btn-info" type="reset">Refresh Test</button>
                        <button class="btn btn-primary">Submit</button>
                        <button class="btn btn-default" type="reset">Reset</button>
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <input type="file" class="file" id="test-upload" multiple>
                        </div>
                        <div id="errorBlock" class="help-block"></div>
                </div>
                <hr>
                <div class="form-group">
                        <div class="file-loading">
                                <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
                        </div>
                </div>
        </form>


        <hr>
        <h4>Multi Language Inputs</h4>
        <form enctype="multipart/form-data">
                <label>French Input</label>
                <div class="file-loading">
                        <input id="file-fr" name="file-fr[]" type="file" multiple>
                </div>
                <hr style="border: 2px dotted">
                <label>Spanish Input</label>
                <div class="file-loading">
                        <input id="file-es" name="file-es[]" type="file" multiple>
                </div>
        </form>
        <hr>
        <br>
</div>
<script>
        $('#file-fr').fileinput({
                theme: 'fa',
                language: 'zh',
                uploadUrl: '#',
                allowedFileExtensions: ['jpg', 'png', 'gif']
        });
        $('#file-es').fileinput({
                theme: 'fa',
                language: 'zh',
                uploadUrl: '#',
                allowedFileExtensions: ['jpg', 'png', 'gif']
        });
        $("#file-0").fileinput({
                theme: 'fa',
                'allowedFileExtensions': ['jpg', 'png', 'gif']
        });
        $("#file-1").fileinput({
                theme: 'fa',
                uploadUrl: '#', // you must set a valid URL here else you will get an error
                allowedFileExtensions: ['jpg', 'png', 'gif'],
                overwriteInitial: false,
                maxFileSize: 1000,
                maxFilesNum: 10,
                //allowedFileTypes: ['image', 'video', 'flash'],
                slugCallback: function (filename) {
                        return filename.replace('(', '_').replace(']', '_');
                }
        });
        /*
         $(".file").on('fileselect', function(event, n, l) {
         alert('File Selected. Name: ' + l + ', Num: ' + n);
         });
         */
        $("#file-3").fileinput({
                theme: 'fa',
                showUpload: false,
                showCaption: false,
                browseClass: "btn btn-primary btn-lg",
                fileType: "any",
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: [
                        "http://lorempixel.com/1920/1080/transport/1",
                        "http://lorempixel.com/1920/1080/transport/2",
                        "http://lorempixel.com/1920/1080/transport/3"
                ],
                initialPreviewConfig: [
                        {caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
                        {caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
                        {caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
                ]
        });
        $("#file-4").fileinput({
                theme: 'fa',
                uploadExtraData: {kvId: '10'}
        });
        $(".btn-warning").on('click', function () {
                var $el = $("#file-4");
                if ($el.attr('disabled')) {
                        $el.fileinput('enable');
                } else {
                        $el.fileinput('disable');
                }
        });
        $(".btn-info").on('click', function () {
                $("#file-4").fileinput('refresh', {previewClass: 'bg-info'});
        });
        /*
         $('#file-4').on('fileselectnone', function() {
         alert('Huh! You selected no files.');
         });
         $('#file-4').on('filebrowse', function() {
         alert('File browse clicked for #file-4');
         });
         */
        $(document).ready(function () {
                $("#test-upload").fileinput({
                        'theme': 'fa',
                        language: 'zh',
                        'showPreview': false,
                        'allowedFileExtensions': ['jpg', 'png', 'gif'],
                        'elErrorContainer': '#errorBlock'
                });
                $("#kv-explorer").fileinput({
                        'theme': 'explorer-fa',
                        language: 'zh',
                        'uploadUrl': '#',
                        overwriteInitial: false,
                        initialPreviewAsData: true,
                        initialPreview: [
                                "http://lorempixel.com/1920/1080/nature/1",
                                "http://lorempixel.com/1920/1080/nature/2",
                                "http://lorempixel.com/1920/1080/nature/3"
                        ],
                        initialPreviewConfig: [
                                {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
                                {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
                                {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
                        ]
                });
                /*
                 $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
                 alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
                 });
                 */
        });
</script>


------上传演示
</body>
</html>